<template>
  <div>
    <el-tabs>
      <el-tab-pane label="业务单据" v-loading="loading">
        <component :is="component" v-if="component" :businessId="businessId" :processParams="processParams"
                   :historyList="historyList" @submitVerify="submitVerify" @closeForm="closeForm"/>
      </el-tab-pane>
      <el-tab-pane label="流程进度">
        <el-table :data="historyList" border stripe style="width: 100%" max-height="300">
          <el-table-column label="流程审批历史记录" align="center">
            <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
            <el-table-column prop="NodeName" label="任务名称" align="center" :formatter="nodeNameFormat"></el-table-column>
            <el-table-column prop="UserName" label="处理人" align="center"></el-table-column>
            <el-table-column prop="nodeStatus" label="状态" align="center"></el-table-column>
            <el-table-column prop="Remark" label="审批意见" align="center"></el-table-column>
            <el-table-column prop="StartTime" label="开始时间" align="center"></el-table-column>
            <el-table-column prop="EndTime" label="结束时间" align="center"></el-table-column>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="流程图">
        <div style="height: 877px;" >
          <iframe :src="iframeUrl"
              scrolling="no" frameborder="0" style="display: block; height: 100%; width: 100%;"></iframe>
        </div>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
  import {historyInfoList} from "@/api/workflow/workFlow";

  export default {
    props: {
      link: String,
      businessId: String,
      processParams: {}
    },
    data() {
      return {
        // 组件
        component: null,
        loading: false,
        historyList: [],
        iframeUrl: null
      }
    },
    mounted() {
      this.component = (resolve) => require(['@/views/' + this.link], resolve);
      this.getHistoryInfoList(this.processParams.docUnid);
    },
    methods: {
      // 查询审批历史记录
      async getHistoryInfoList(docUnid) {
        const { responseBody } = await historyInfoList({"docUnid":docUnid});
        const list = responseBody.rows;
        // 设置各节点状态（‘同意’或‘退回’），跳过第一个节点，第一个节点默认‘同意’
        list[0].nodeStatus = '同意'
        for (let i = list.length - 1; i > 0; i--) {
          if (list[i].Actionid === 'GoToNextNode') {
            list[i].nodeStatus = '同意'
          } else if (list[i].Actionid === 'GoToAnyNode') {
            list[i].nodeStatus = '退回'
          } else {
            list[i].nodeStatus = '处理中'
          }
        }
        this.historyList = list
        this.iframeUrl = "http://188.188.10.38:8080/osbpm/rule?wf_num=R_S003_B068&Processid=" + this.processParams.processId + "&DocUnid=" + this.processParams.docUnid;
      },

      // 任务名称回显
      nodeNameFormat(row) {
        return row.NodeName ? row.NodeName : this.processParams.currentNodeName
      },

      // 状态回显
      actionNameFormat (row) {
        return row.Actionid
      },

      closeForm() {
        this.$emit('closeForm')
      },
      submitVerify() {
        this.$emit('submitVerify')
      },
    }
  }
</script>